<template>
  <div class="experts-item-box" :style="{backgroundImage: 'url(' + data.bigImage + ')'}">
    <div class="content-box">
      <div class="name">{{data.name}}</div>
      <div class="position">{{data.job}}</div>
      <!-- 遮罩层 -->
      <div class="mask"></div>
    </div>
    <!-- 遮罩层 -->
    <div class="mask-box">
      <div class="name">{{data.name}}</div>
      <div class="position">{{data.job}}</div>
      <div class="desc">{{data.desc}}</div>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    data: {
      type: Object,
      default() {
        return {}
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.experts-item-box {
  width: 220px;
  height: 320px;
  background-size: cover;
  border-radius: 4px;
  margin-right: 20px;
  margin-bottom: 20px;
  float: left;
  position: relative;
  .content-box {
    width: 220px;
    height: 100px;
    background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.5) 100%);
    border-radius: 0px 0px 4px 4px;
    position: absolute;
    bottom: 0;
    left: 0;
    .name {
      padding-top: 26px;
      text-align: center;
      height: 32px;
      font-size: 24px;
      font-family: PingFangSC-Semibold, PingFang SC;
      font-weight: 600;
      color: #FFFFFF;
      line-height: 32px;
      margin-bottom: 4px;
    }
    .position {
      height: 18px;
      font-size: 14px;
      
      font-weight: 400;
      color: #FFFFFF;
      line-height: 18px;
      text-align: center;
    }
    .mask {
      width: 220px;
      height: 100px;
      background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.5) 100%);
      position: absolute;
      bottom: 0;
      left: 0;
      border-radius: 0px 0px 4px 4px;
    }
  }
  .mask-box {
    width: 220px;
    height: 320px;
    background: rgba($color: #000000, $alpha: 0.4);
    border-radius: 4px;
    position: absolute;
    top: 0;
    left: 0;
    text-align: center;
    display: none;
    padding-left: 20px;
    padding-right: 20px;
    box-sizing: border-box;
    .name {
      padding-top: 130px;
      height: 32px;
      font-size: 24px;
      font-family: PingFangSC-Semibold, PingFang SC;
      font-weight: 600;
      color: rgba($color: #ffffff, $alpha: 1);
      line-height: 32px;
      margin-bottom: 4px;
    }
    .position {
      height: 18px;
      font-size: 14px;
      
      font-weight: 400;
      color: rgba($color: #ffffff, $alpha: 1);
      line-height: 18px;
      margin-bottom: 16px;
    }
    .desc {
      font-size: 14px;
      
      font-weight: 400;
      color: rgba($color: #ffffff, $alpha: 1);
      line-height: 20px;
    }
  }
  &:hover {
    .mask-box {
      display: block;
    }
    .content-box {
      display: none;
    }
  }
}
</style>